<script setup lang="ts">
import type { DatePickValue, LastSelectOptions } from './types.ts'
import dayjs from 'dayjs'

import { computed, ref } from 'vue'
import DateInput from './DateInput.vue'
import DatePopover from './DatePopover.vue'
import { formatDate } from './utils.ts'

const props = withDefaults(
  defineProps<{
    clearable?: boolean
    modelValue: DatePickValue
    placeholder?: string
    dateRange?: number // 秒
    mathRandom?: number
    defaultLastActive?: number
    lastOptions: LastSelectOptions
  }>(),
  {
    placeholder: '请选择时间范围',
    clearable: true,
    dateRange: 60 * 60,
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: DatePickValue]
  'search': [value: DatePickValue]
}>()

const active = ref(false)
const popoverVisible = ref(false)
const hasValue = computed(() => !!props.modelValue.filter(Boolean).length)
const lastActive = ref(props.defaultLastActive)

// if (props.defaultLastActive) {
//   emit('update:modelValue', [
//     dayjs().subtract(props.defaultLastActive, 'second').unix().toString(),
//     dayjs().unix().toString(),
//   ])
// }

async function handleClear() {
  emit('update:modelValue', [])
  lastActive.value = void 0
  // emit('search', [])
}

function handleSubmit(value: DatePickValue, lastValue?: number) {
  emit('update:modelValue', [...value])
  lastActive.value = lastValue
  popoverVisible.value = false
  // emit('search', [...value])
}

// 更新最后时间
function update() {
  if (!lastActive.value)
    return
  const now = dayjs()
  const end = now.unix()
  const start = now.subtract(lastActive.value, 'second').unix()
  emit('update:modelValue', [String(start), String(end)])
}

// defineExpose({ update })

watch(
  () => props.mathRandom,
  () => {
    update()
  },
  { deep: true, immediate: true },
)
</script>

<template>
  <div class="strong-date-picker">
    <a-popover
      :popup-visible="popoverVisible"
      placement="bottom-start"
      trigger="click"
      width="322"
      content-class="strong-date-picker-popover"
      :arrow-style="{
        'border-left': '1px solid #EEEFF2',
        'border-bottom': '1px solid #EEEFF2',
        'z-index': 100,
        'display': 'none',
      }"
      :content-style="{
        'padding': '0px',
        'border-radius': '8px',
        /* shadow-md */
      }"
      @before-enter="active = true"
      @before-leave="active = false"
    >
      <div class="strong-date-picker-box">
        <a-tooltip
          popper-class="strong-date-picker-tooltip"
          :disabled="!hasValue || !lastActive"
          placement="top"
        >
          <template #content>
            <div v-if="modelValue[0]">
              开始时间：{{ formatDate(modelValue[0]) }}
            </div>
            <div v-if="modelValue[1]">
              结束时间：{{ formatDate(modelValue[1]) }}
            </div>
          </template>
          <date-input
            :class="{ active }"
            :last-active="lastActive"
            :model-value="modelValue"
            :placeholder="placeholder"
            :clearable="clearable"
            @click="popoverVisible = !popoverVisible"
            @clear="handleClear"
          />
        </a-tooltip>
      </div>
      <template #content>
        <date-popover
          :active="popoverVisible"
          :model-value="modelValue"
          :last-active="lastActive"
          :date-range="dateRange"
          :last-options="lastOptions"
          @submit="handleSubmit"
        />
      </template>
    </a-popover>
  </div>
</template>

<style lang="less">
@import './style.less';
</style>
